<!DOCTYPE html>
<html class="loading" lang="en" data-textdirection="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<meta name="author" content="PIXINVENT">
<title>自助售货管理后台</title>
<link rel="stylesheet" type="text/css" href="app-assets/css/vendors.css">
<link rel="stylesheet" type="text/css" href="app-assets/css/vertical-menu.css">
<link rel="stylesheet" type="text/css" href="app-assets/css/bootstrap-extended.css">
<script src="date/js/pageUtil.js" type="text/javascript"></script>
</head>
<body>
<div class="content-wrapper">
  <div class="content-header ">
    <div class="content-header-left mb-2">
      <h3 class="content-header-title mb-0">商品列表</h3>
    </div>
  </div>
  <div class="card">
    <div class="card-content">
      <div class="card-body">
        <div class="searchbox">
          <form class="form-inline">
            <div class="form-group">
              <input type="text" class="form-control" id="productName" placeholder="请填写商品名称">
            </div>
            <!-- 分类下拉框 -->
            <div class="form-group">
              <select class="form-control" id="selectCategories"> 
                
              </select>
            </div>
            <!-- 供应商下拉框 -->
            <div class="form-group">
              <select class="form-control" id="selectSuppliers"> 
                
              </select>
            </div>
			      <div class="form-group">
              <button type="button" class="btn btn-primary" onclick="searchProductList()">查询</button>
            </div>
            
          </form>
        </div>
        <div class="funcbtn clearfix">
          <div class="pull-left"><a class="btn btn-info" href="编辑商品信息.html"> 添加商品</a></div>
        </div>
        <div class="tablebox1">
          <table class="table">
            <thead>
              <tr>
                <th>商品图片</th>
                <th>商品ID</th>
                <th>商品名称</th>
                <th>商品品牌</th>
                <th>建议售价</th>
                <th>采购价</th>
                <th>商品类别</th>
                <th>供应商</th>
                <th>创建时间</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody id="productsBody">
            
				
            </tbody>
          </table>
 
		 <div class="page clearfix">
						<div class="pull-left" id="pageTotal">共 400 条记录 第 1 / 80 页</div>
						<div class="pull-right">
							<nav aria-label="..." class="pull-left">
								  <ul class="pagination" id="pagination">
								 </ul>
							</nav>
							
							<div class="pull-left p-r-20  p-l-20"><select class="form-control"><option>5条每页</option></select></div>
							<div class="pull-left">跳至<input type="text" value="5" class="form-control">页</div>
						</div>
							
		</div>
			
		  </div>
      </div>
    </div>
  </div>
</div>

<script src="app-assets/js/vendors.min.js" type="text/javascript"></script> 
<script src="app-assets/js/app-menu.js" type="text/javascript"></script> 
<script src="app-assets/js/app.js" type="text/javascript"></script> 
<script src="app-assets/js/echarts.min.js" type="text/javascript"></script> 

</body>
</html>
<script>
  let productQuery={
    page:1,
    pageSize:3,
    productName:'',
    categoryId:'-1',
    supplierId:'-1'
  
  }
  $(function(){
    //加载列表
    getProductList(productQuery);
    //加载类别列表
    getCategoryList();
    //加载供应商列表
    getsupplierList();
  });
  //点击搜索按钮
  function searchProductList(){
    //获取搜索条件
    productQuery.productName=$("#productName").val();
    productQuery.categoryId=$("#selectCategories").val();
    productQuery.supplierId=$("#selectSuppliers").val();
    getProductList(productQuery);
  }


  //获取供应商列表
  function getsupplierList(){
    $.ajax({
      url:'http://127.0.0.1:25080/suppliers/list',
      type:'post',
       data:{
        pageNum:0,
      },
      dataType:'json',
      success:function(result){
        console.log('获取供应商列表',result);
        $("#selectSuppliers").empty();
        //请选择
        $("#selectSuppliers").append('<option value="-1">请选择供应商</option>');
        if(result.status){
          result.data.list.forEach(function(item){
            $("#selectSuppliers").append('<option value="'+item.supplierId+'">'+item.supplierName+'</option>');
          })
        }
      }
    })
  }

  //获取商品类别列表
  function getCategoryList(){
    $.ajax({
      url:'http://127.0.0.1:25080/categories/list',
      type:'post',
      data:{
        pageNum:0,
      },
      dataType:'json',
      success:function(result){
        console.log('获取商品类别列表',result);
        //清空类别列表
        $("#selectCategories").empty();
        //添加请选择
        $("#selectCategories").append(`<option value="-1">请选择商品类别</option>`);
        if(result.status){
          let categoryList = result.data.list;
          categoryList.forEach(function(item){
            $('#selectCategories').append('<option value="'+item.categoryId+'">'+item.categoryName+'</option>');

          });
        }
      }
    })
  }



  // 获取商品列表
  function getProductList(productQuery){
    $.ajax({
      url:'http://127.0.0.1:25080/products/page',
      type:'post',
      data:productQuery,
      success:function(result){
        console.log('商品列表',result);
        if(result.code==200){ 
          let productList=result.data.list;
          $('#productsBody').empty();
          productList.forEach(product => {
            if(product.imageUrl){
              product.imageUrl='http://127.0.0.1:25080/'+product.imageUrl;
            }else{
              product.imageUrl='app-assets/images/avatar.jpg';
            }
            let tr = `<tr>
                      <td>
                        <img src="${product.imageUrl}" alt="" width="60"></img>
                      </td>
                      <td>${product.productId}</td>
                      <td>${product.productName}</td>
                      <td>${product.brand}</td>
                      <td>${product.price}</td>
                      <td>${product.purchasePrice}</td>
                      <td>${product.categoryName}</td>
                      <td>${product.supplierName}</td>
                      <td>${product.createdAt}</td>
                      <td>
                        <a href="编辑商品信息.html?id=`+ product.productId +`" class="btn btn-primary btn-td">修改</a>
                        <a href="#" class="btn btn-danger btn-td"  onclick="deleteEm(${product.productId})">删除</a>
                      </td>
                      </tr>`;
              $("#productsBody").append(tr);
          });
          // 添加分页功能
        $("#pageTotal").html("");
        let pageTotal =`共 ${result.data.total} 条记录 第 ${result.data.pageNum} / ${result.data.pages} 页`;
        $("#pageTotal").append(pageTotal);
        // 生成分页功能 调用pageUtil.js方法
        generatePagination(result.data.pageNum, result.data.pages);
        }
      }
    })
  }
  // 切换页面
function changePage(pageNum) {
  productQuery.pageNum = pageNum;
  getProductList(productQuery);
}
</script>